<template>
  <div class="box">23
    <a v-bind:href="url">百度一下</a>
    <input type="text" v-bind:value="msg">
    <input type="checkbox">
  </div>
</template>
<script>
// 这里需要写一些逻辑
// vue是一个mvv的框架 m➡model 数据模型 v➡view视图层 vm（viewModel）➡视图模型层
// 怎么提供一个数据？
export default {
  // 提供一个data的配置项，用来提供数据
  // data是一个函数，返回一个数据对象
  name:'directive-component',
  data() {
    return {
      age: 18,
      msg: '我是黑马',
      url: 'http://www.baidu.com/',
      flag:true,
    }
  }
}
</script>
<!-- less语法的使用 -->
<style lang="less">
.box{
  .color{
    color:red,
  }
}
</style>
